import React, { Component } from 'react'
import Market from './market/Market'
import Chart from './chart/Chart'
import Account from './account/Account'
import BidAsk from './bidask/BidAsk'
import OrderBoard from './orderboard/OrderBoard'
import TradeDetail from './tradedetail/TradeDetail'
import DataQuery from './dataquery/DataQuery'
import themeHOC from '../common/themeHOC'

import './trade.less'

@themeHOC
class Trade extends Component {
  render () {
    return (
      <div className={`trade-${this.props.theme}`}>
        <Market/>
        <div className="trade-content">
          <div className="trade-left-column">
            <Chart/>
            <DataQuery/>
          </div>
          <div className="trade-middle-column">
            <BidAsk/>
            <OrderBoard/>
          </div>
          <div className="trade-right-column">
            <TradeDetail/>
            <Account/>
          </div>
        </div>
      </div>
    )
  }
}

export default Trade
